<template>
<div :style="{width:width,height:height}">
    <div v-show="flag"  class="" ref="echarts" :style="{height:height}" style="overflow: hidden"></div>
    <div v-show="!flag"  class="no-data-echarts">
        {{message}}
    </div>
</div>
</template>
<script>
import mixincomon from '../../../mixins/mixincomon';
import { mapState } from "vuex";
//安装jquery 兼容老的插件
import $ from 'jquery';
export default {
    name:"chart",
    mixins: [mixincomon],
    // computed: mapState({
    //     list:state=>state.commonHeader.list,
    // }),
    data(){
        return {
            flag:true,
            setTimeFlag:null,
            optionsEnd:{},
            index:0,
            dataEnd:[],
            options:{
                textStyle:{
                    color:'rgba(255, 255, 255, 1)'
                },
                color:['#fff','#0393FF',"#ffea37"],
                title: {
                    show:false,
                    text: '堆叠区域图'
                },
                legend: {
                    show:true,
                    data: [],
                    textStyle:{
                        color:'rgba(255, 255, 255, 0.4)'
                    },
                    type:"scroll",
                    icon:"rect",
                    bottom:"10px"
                },
                tooltip: {
                    show:true,
                    trigger: 'axis',
                    backgroundColor:'rgba(54, 165, 254, 0.6)',
                    // confine: true,
                    position: function (point, params, dom, rect, size) {
                        // 固定在顶部
                        return [point[0], '10%'];
                    }
                },
                grid: {
                    top:'4%',
                    left: '3%',
                    right: '6%',
                    bottom: '12%',
                    containLabel: true
                },
                xAxis: [
                    {
                        type: 'category',
                        splitLine: {
                            show: false
                        },
                        axisTick: {
                            show: false
                        },
                        axisLine: {
                            show: true,
                            lineStyle: {
                                color:'rgba(255, 255, 255, 0.4)'
                            }
                        },
                    },
                ],
                yAxis: [
                    {
                        type: 'value',
                        splitLine: {
                            show: false
                        },
                        axisTick: {
                            show: false
                        },
                        axisLine: {
                            show: true,
                            lineStyle: {
                                color:'rgba(255, 255, 255, 0.4)'
                            }
                        },
                        minInterval: 1

                    }
                ],
                series: [{}]
            },

        }
    },
    props:{
        option:{
            type:Object,
            default:()=>{
                return {}
            }
        },
        data:{
            type:Array,
            default:()=>{
                return []
            }
        },
        width:{
            type:String,
            default:"300px"
        },
        height:{
            type:String,
            default:"300px"
        },
        message:{
            type:String,
            default:'暂无数据'
        },
        y:{
            type:Boolean,
            default:false,
        },
        roll:{
            type:Boolean,
            default:true,
        },
        rollshow:{
            type:Number,
            default:5,
        }

    },
    mounted(){
        this.init();
        this.$nextTick(()=>{
            $(this.$refs['echarts']).resize(()=>{
                this.resizeChart()
            })
        })
    },
    methods:{
        init(){
            if(this.data.length>0){
                this.flag=true;
                let _option=this.tool.deepMerge(this.options,this.option);
                this.$nextTick(()=>{
                    // let labels=[],legend=[],series=[];
                    let labels=this.data[0].dateTime,legend=[],series=[];
                    // this.data[0].data.map((item)=>{
                    //     labels.push(item.label);
                    // })
                    this.data.map((item,index)=>{
                        series.push(this.tool.deepMerge(Object.assign({type:'line'},_option.series[index]),item));
                        legend.push(item.name?item.name:'');
                    })
                    _option.series=series;
                    if(this.y){
                        _option.yAxis[0].data=labels;
                        _option.xAxis[0].type="value";
                        _option.yAxis[0].type="category";
                    }else{
                        _option.xAxis[0].data=labels;
                    }
                    _option.legend.data=legend;

                    this.optionsEnd=_.cloneDeep(_option);
                    if(this.roll){
                      this.dataEnd=_.cloneDeep(_option.series);
                    //   _option.series.map((item)=>{
                    //     item.data.slice(0,this.rollshow)
                    //   })
                    }
                    // console.log(_option,'kkkkkkk=====')
                    this.initChart('echarts',_option);
                })
            }else{
                this.clearChart();
                this.flag=false;
            }
        },
    }
}
</script>
<style lang="less" scoped>

</style>
